import React from 'react'
import { Input } from 'antd'
import { filterUnnecessaryProps } from '../../utils'

const MATCH_MONEY = /^-?(\d+)?\.?(\d{1,2})?$/

function formatter(value) {
  if (!value) return ''
  return value.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}
function parser(value) {
  return value.replace(/\$\s?|(,*)/g, '')
}
function computeCaretBetweenInput(currentValue, prevValue) {
  const currentCommasAmt = formatter(currentValue).split(',').length
  const prevCommasAmt = formatter(prevValue).split(',').length
  return currentCommasAmt - prevCommasAmt
}
function getCaretPosition(textDom) {
  let cursorPos = 0;
  if (document.selection) {
    // IE Support
    // textDom.focus();
    let selectRange = document.selection.createRange();
    selectRange.moveStart('character', -textDom.value.length);
    cursorPos = selectRange.text.length;
  } else if (textDom.selectionStart || textDom.selectionStart === 0) {
    // Firefox support
    cursorPos = textDom.selectionStart;
  }
  return cursorPos;
}
function setCaretPosition(textDom, pos) {
  if (textDom.setSelectionRange) {
    // IE Support
    // textDom.focus();
    textDom.setSelectionRange(pos, pos);
  } else if (textDom.createTextRange) {
    // Firefox support
    const range = textDom.createTextRange();
    range.collapse(true);
    range.moveEnd('character', pos);
    range.moveStart('character', pos);
    range.select();
  }
}

class CurrencyInput extends React.PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      value: props.defaultValue
    }
    this.caretPosition = 0
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.value !== this.props.value) {
      this.setInputValue(formatter(nextProps.value))
      console.log('cursor position ', getCaretPosition(this.antInput.input))
    }
  }
  componentDidUpdate(prevProps) {
    // const currentFormatterValue = formatter(this.props.value)
    // const prevFormatterValue = formatter(prevProps.value)
    // const offset =
    // currentFormatterValue.split(/\d{1,3}/).length - prevFormatterValue.split(/\d{1,3}/).length
    // if (prevFormatterValue.split(/\d{1,3}/) < currentFormatterValue.split(/\d{1,3}/)) {
    //   return setCaretPosition(this.antInput.input, this.caretPosition + 1)
    // }
    const offset = computeCaretBetweenInput(this.props.value, prevProps.value)
    // console.log('offset offset', offset)
    setCaretPosition(this.antInput.input, this.caretPosition + offset)
  }
  setInputValue = (value) => {
    this.setState({
      value
    })
  }
  setInputRef = (el) => {
    this.antInput = el
  }
  handleOnChange = (ev) => {
    const { value } = ev.target
    const { onChange } = this.props
    this.caretPosition = getCaretPosition(ev.target)
    // console.log('selectionStart', ev.target.selectionStart, ev.target.value.length)
    // console.dir(ev.target)
    const afterParserValue = parser(value)
    if (MATCH_MONEY.test(afterParserValue) || afterParserValue === '') {
      // const afterFormatterValue = formatter(afterParserValue)
      // this.setInputValue(afterFormatterValue)
      onChange(afterParserValue, ev)
    }
  }
  render() {
    const rest = filterUnnecessaryProps(this.props, ['onChange', 'value'])
    return (<Input
      onChange={this.handleOnChange}
      value={this.state.value}
      ref={this.setInputRef}
      {...rest}
    />)
  }
}

export default CurrencyInput
